<template>
  <div class="divBackgroundImage" :style="backgroundStyle" @click="toUrl">
  </div>
</template>
<script>
export default {
  props: ["datas", "imageSrc", "emptyImage", "btn_style"],
  data() {
    return {};
  },
  computed: {
    backgroundStyle() {
      const imageUrl = this.imageSrc || this.emptyImage;
      let style = `
        background-image: url(${imageUrl});
        height: ${this.datas.button_size}px;
        width: ${this.datas.button_size}px;
        background-size: 100% 100%;
        background-position: center;
        border-radius: 50%;
      `;
      if (this.btn_style) {
        style += this.btn_style;
      }
      return style;
    }
  },
  methods: {
    toUrl() {
      this.$emit("toUrl");
    }
  }
};
</script>
<style lang="scss" scoped>
.divBackgroundImage {
  background-repeat: no-repeat;
}
</style>
